<template>
  <div class="table-search" v-if="columns.length" :style="`height:${state.searchtabHeight}px`">
    <div>
      <el-form class="form_warp" ref="formRef" :model="searchParam" :inline="true" :label-width="labelWidth + 'px'">
        <template v-for="item in columns" :key="item.prop">
          <el-form-item :label="`${item.label} :`" :label-width="item.labelWidth || labelWidth">
            <SearchFormItem :item="item" :searchParam="searchParam"></SearchFormItem>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div class="search-operation">
      <el-button type="primary" link class="search-isOpen" @click="handleSearchShow" v-if="state.showOpenBtn">
        {{ searchShow? "合并": "展开" }}
        <el-icon class="el-icon--right">
          <component :is="searchShow ? ArrowUp : ArrowDown"></component>
        </el-icon>
      </el-button>
      <el-button class="search_btn" type="primary" :icon="Search" @click="search">搜索</el-button>
      <el-button v-if="$props.resetbtn" class="reset_btn" :icon="RefreshLeft" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script setup  >
import { ref, onMounted, reactive,watchEffect } from "vue"
import SearchFormItem from "./SearchFormItem.vue"
import { RefreshLeft, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue"
const props = defineProps({
  columns: Array,
  searchParam: Object,
  labelWidth: {
    type: [Number, String],
    default: 100
  },
  resetbtn: {
    type: Boolean,
    default:true
  }
  

})
const formRef = ref(null)
const state = reactive({
  showOpenBtn: false,// 是否展示【展开合并】按钮
  maxHeight: '',
  searchtabHeight: 50, // 
  docWidthAndHeight: { width: 0, height: 0 },
})
const emit = defineEmits(['search','reset'])
const search = () => {
  emit('search')
}
// 是否展开搜索项
const searchShow = ref(false)
const handleSearchShow = () => {
  searchShow.value = !searchShow.value
  if (searchShow.value) state.searchtabHeight = state.maxHeight
  else state.searchtabHeight = 50
}

const reset = () => {
  for (let key in props.searchParam) {
    // eslint-disable-next-line vue/no-mutating-props
    props.searchParam[key] = null
  }
  emit('reset')
}
onMounted(() => {
  docWidthAndHeight();
  watchEffect(() => {
    if (state.docWidthAndHeight.width) {
      let formWarpHeight = 0
      let form_warpDom=document.getElementsByClassName('form_warp')
      if (form_warpDom&&form_warpDom[0]) {
        formWarpHeight = form_warpDom[0].offsetHeight
      }
      if (formWarpHeight > 60) {
        state.showOpenBtn = true
        state.maxHeight = formWarpHeight
      } else {
        state.showOpenBtn = false
        state.maxHeight = 50
      }
    }
  })
})
const docWidthAndHeight = () => {
  //  浏览器高度
  let WH = { width: window.innerWidth, height: window.innerHeight };
  state.docWidthAndHeight = WH;
  window.addEventListener('resize', function () {
    WH = { width: window.innerWidth, height: window.innerHeight };
    state.docWidthAndHeight = WH;
  });
};
</script>
<script>
export default {
  name: 'SearchForm'
}
</script>
<style lang="scss">
@import './index.scss';

.table-search {
  height: 50px;
  overflow: hidden;
  transition: all 0.3s;
}
</style>
